<template>
    <div class="login-bg">
        <div class="login-row">
            <div class="login-title">风暴中心</div>
            <el-form @keydown.enter.native="doLogin">
                <el-form-item>
                    <el-select v-model="dataMap.loginForm.tenant" placeholder="请选择组织">
                        <template #prefix>
                            <el-icon><School /></el-icon>
                        </template> 
                        <el-option v-for="item in dataMap.organizationList" :label="item.organization_shortname" :value=item.id></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="dataMap.loginForm.user_name" clearable maxlength="50" placeholder="请输入用户名" :prefix-icon="UserFilled" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="dataMap.loginForm.user_password"  type="password" show-password maxlength="50" placeholder="请输入密码" :prefix-icon="Lock" />
                </el-form-item>
            </el-form>
            <el-button @click="doLogin" type="primary" class="login-btn">登&nbsp;录</el-button>
        </div>
        <el-footer></el-footer>
    </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import { UserFilled,Lock,Warning } from '@element-plus/icons-vue'
import httpTool from '../../httpRequest'
import { useRouter } from 'vue-router'
import {useStore} from 'vuex'
import {addRouters} from '../../util/syncRouter' 
import { getTree } from '../../util/common';
const router = useRouter()
const store = useStore()

let dataMap = reactive({
    loginForm:{tenant:'',user_name:'',user_password:'',guid_str:''},
    organizationList:[],
    loading:true,
});
//获取组织信息
onMounted(
    ()=>{
        httpTool.post('/api/login/GetOrganizationList',{
            noLoading:true
        }).then(response=>{
            dataMap.organizationList = response.data;
        }).catch(error=>{
            console.log(error);
        })
    }
)

const modules = import.meta.glob
let doLogin = ()=>{
    httpTool.post('/api/login/CheckLogin',dataMap.loginForm).then(response=>{
        if(response.data.captureChecked){
            //如果验证码被重新验证，那么就重新获取验证码
            
        }else{
            //把token保存在sessionStorage中
            window.sessionStorage.setItem('token',response.data.token)
            store.commit('updateState',['menuList',getTree(response.data.menuList,'id','menu_pid')]);
            addRouters();
            router.push(response.data.routerStr);
        }
    }).catch(error=>{
        console.log(error);         //error可以是本地的错误信息，也可以是服务器的错误信息
        //console.log(error.response);         //接受来自服务端的相应错误，如果服务器没有错误，则没有response属性
    });
}
</script>


<style scoped>
.login-title{
    font-size: 30px;
    margin-top:10px;
    margin-bottom: 10px;
    font-weight: 500;
}
.login-bg{
    text-align: center;
    height: 100%;
    width: 100%;
    background-image: url("../../assets/img/login_bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
}

 .login-bg:before{
    content:'';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.codeimg 
{
    width:110px;
    margin-left:calc(50% - 110px);
}
.login-btn{
    width: 100%;
    line-height: 38px;
}
.login-row{
    margin-top:-100px;
    vertical-align: middle;
    display: inline-block;
    background-color: #fff;
    padding:0 15px 15px;
    border-radius: 5px;
    width: 380px;
    /* position: absolute;
    top:50%;
    transform: translateY(-50%); */
}
.remember{
    margin-top: -5px;
    margin-bottom: 10px;
}
:deep(.el-input__inner),.el-checkbox.el-checkbox--large :deep(.el-checkbox__label),.login-btn,.codeimg{
    height: 40px;
    line-height: 40px;
    font-size: 14px;
}
:deep(.el-checkbox__inner)::after{
    left:5px;
    top:2px;
}
.el-checkbox.el-checkbox--large :deep(.el-checkbox__inner){
   height: 16px; 
   width: 16px; 
}
.el-select{
  width:100%
}
.el-footer{
  padding:0;
  height:40px;
  line-height:40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  color:#fff;
  /* background-color: #f0f0f0d0; */
}
.el-footer.beian{
  height:50px;
  line-height:inherit;
}
@media screen and (max-width: 500px) {
   .login-row{
        width: calc(100% - 30px);
    }
}
@media screen and (min-width:501px) and (max-width: 900px) {
  .login-row{
        margin-top:0;
        width: 70%;
        min-width: 380px;
    }
}
</style>
  